<template>
  <div>
    <!-- 插值语法 -->
    <h2>我的母校{{ school }},坐落于{{ address }}</h2>
    <!-- 数据的单向绑定 -->
    <input type="text" :value="school" />
    <!-- 数据的双向绑定 -->
    <input type="text" v-model="school" />
    <!-- 事件的绑定 -->
    <button @click="showClick">确定</button><br />
    <!-- 事件的传参 -->
    <button @click="show1(school)">提交</button>
    <!-- 传入第一个参数 -->
    <button @click="show2(3)">提交</button>
    <!-- 传入两个参数 -->
    <button @click="show3(3, 40)">提交</button>
    <!-- 传入三个参数第三个参数是$event -->
    <button @click="show4(3, 40, $event)">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      school: "中央戏剧学院",
      address: "北京海淀区",
    };
  },
  methods: {
    showClick() {
      alert("惦记我吗?");
    },
    show1(name) {
      alert(name);
    },
    show2(floor) {
      alert(`学校的楼层是${floor}`);
    },
    show3(floor, age) {
      alert(`学校的楼层是${floor},建校${age}`);
    },
    show4(floor, age, event) {
      console.log(event);
      alert(`学校的楼层是${floor},建校${age}`);
    },
  },
  computed: {},
};
</script>

<style>
</style>